
<script setup>
import {ref} from 'vue';


const tags = ref(['', 'success', 'info', 'warning', 'danger'])

// 快捷入口
const links = ref([
  {title: 'Vue3', href: 'https://v3.cn.vuejs.org/'},
  {title: 'Element-Plus', href: 'https://element-plus.gitee.io/zh-CN/guide/design.html'},
  {title: 'axios', href: 'http://www.axios-js.com/'},
  {title: 'Vite', href: 'https://vitejs.dev/guide/'},
  {title: 'vueuse', href: 'https://vueuse.org/'},
  {title: 'sass', href: 'https://www.sass.hk/'},
  {title: 'echarts', href: 'https://echarts.apache.org/zh/index.html'},
])
/**
 * 跳转页面
 */
const goToPage = (url) => {
  window.open(url, '__blank')
}

</script>
<template>
  <div class="app-container">

  </div>
</template>

<style lang='scss' scoped>
.box-card {
  :deep(.el-card__header) {
    padding: 14px 15px 7px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    img {
      height: 24px;
      vertical-align: middle;
    }
  }

  .person {
    justify-content: start;
    cursor: pointer;

    img {
      height: 40px;
      vertical-align: middle;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  .content {
    color: rgba(0, 0, 0, 0.45);
    height: 66px;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 20px;

    .tags-style {
      margin: 5px;
      cursor: pointer;
    }
  }
  ._flex{
    height: auto;
    display: flex;
    justify-content: space-around;
  }
  .footer {
    display: flex;
    justify-content: space-between;
  }
}

.img-pro--container {
  cursor: pointer;

  img {
    width: 100%;
  }
}
</style>
